<template>
  <div class="page-container-padding">
    <div>
      <el-input
        v-model="keyword"
        placeholder="输入瑞智号或手机查询"
        size="mini"
        style="width: 200px"
      />
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 6px"
        :loading="queryLoading"
        @click="toQueryUsers"
      >
        查询
      </el-button>
    </div>
    <div style="margin-top: 8px">
      <el-table border stripe :data="userList">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="ssn" label="系统号" width="110" />
        <el-table-column prop="phone" label="手机" />
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="ut_name" label="类型" width="120" />
        <el-table-column
          prop="is_employee"
          label="公司员工"
          align="center"
          width="80"
        >
          <template #default="scope">
            <span :class="scope.row.is_employee ? 'green-text' : 'red-text'">
              {{ scope.row.is_employee ? '是' : '否' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="has_futures_account"
          label="公司开户"
          align="center"
          width="80"
        >
          <template #default="scope">
            <span
              :class="scope.row.has_futures_account ? 'green-text' : 'red-text'"
            >
              {{ scope.row.has_futures_account ? '是' : '否' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="probation_expire"
          label="试用截止"
          align="center"
          width="100"
        />
        <el-table-column label="状态" width="80" align="center">
          <template #default="scope">
            <el-tag
              size="mini"
              :type="scope.row.is_active ? 'success' : 'danger'"
            >
              {{ scope.row.is_active ? '正常' : '无效' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="60" align="center">
          <template #default="scope">
            <el-button type="text" @click="toUpdateUser(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 8px">
      <el-pagination
        background
        hide-on-single-page
        layout="total,prev,pager,next"
        :current-page="page"
        :page-size="pageSize"
        :total="totalCount"
        @current-change="pageChange"
      />
    </div>
    <!-- 编辑当前弹窗 -->
    <el-dialog
      :visible.sync="currentRow.showEdit"
      title="用户信息维护"
      width="600px"
    >
      <el-form label-width="80px" size="mini">
        <el-form-item label="手机">
          <el-input
            v-model="currentRow.phone"
            placeholder="用户的手机"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input
            v-model="currentRow.nickname"
            placeholder="用户的昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            v-model="currentRow.username"
            placeholder="用户的姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户经理">
          <el-input
            v-model="currentRow.service"
            placeholder="用户的客户经理"
          ></el-input>
        </el-form-item>
        <el-form-item label="我司员工">
          <el-select v-model="currentRow.is_employee" style="width: 100%">
            <el-option :value="true" label="是" />
            <el-option :value="false" label="否" />
          </el-select>
        </el-form-item>
        <el-form-item label="我司开户">
          <el-select
            v-model="currentRow.has_futures_account"
            style="width: 100%"
          >
            <el-option :value="true" label="是" />
            <el-option :value="false" label="否" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model="currentRow.user_type" style="width: 100%">
            <el-option :value="1" label="正式用户" />
            <el-option :value="2" label="注册用户" />
            <el-option :value="3" label="试用用户" />
            <el-option :value="4" label="定制用户" />
          </el-select>
        </el-form-item>
        <el-form-item label="试用截止">
          <el-date-picker
            v-model="currentRow.probation_expire"
            type="date"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="currentRow.password"
            placeholder="重置用户的密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="有效">
          <el-switch
            v-model="currentRow.is_active"
            active-text="正常"
            inactive-text="失效"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="currentRow.showEdit = false">取消</el-button>
        <el-button
          type="primary"
          :loading="currentRow.saveLoading"
          @click="toSaveUpdateRow"
        >
          确定保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import { RetrieveUser, UpdateUser } from '@/api/adminRuizhi/common'
  export default {
    data() {
      return {
        keyword: '',
        page: 1,
        pageSize: 30,
        totalCount: 0,
        userList: [],
        queryLoading: false,
        currentRow: {
          uid: -1,
          showEdit: false,
          saveLoading: false,
          phone: '',
          nickname: '',
          username: '',
          company: '',
          job: '',
          service: '',
          user_type: null,
          vip_expire: '',
          is_employee: null,
          has_futures_account: null,
          probation_expire: '',
          password: '',
          is_active: null,
        },
      }
    },
    mounted() {
      this.getUsers()
    },
    methods: {
      getUsers() {
        this.queryLoading = true
        RetrieveUser(this.keyword, this.page, this.pageSize).then((res) => {
          const resData = res.data
          this.userList = resData.rows
          this.totalCount = resData.total_count
          this.queryLoading = false
        })
      },

      toQueryUsers() {
        this.page = 1
        this.getUsers()
      },

      pageChange(p) {
        this.page = p
        this.getUsers()
      },

      toUpdateUser(row) {
        this.currentRow.uid = row.id
        this.currentRow.phone = row.phone
        this.currentRow.nickname = row.nickname
        this.currentRow.username = row.username
        this.currentRow.company = row.company
        this.currentRow.job = row.job
        this.currentRow.service = row.service
        this.currentRow.is_employee = row.is_employee
        this.currentRow.has_futures_account = row.has_futures_account
        this.currentRow.probation_expire = row.probation_expire
        this.currentRow.vip_expire = new Date(row.vip_expire)
        this.currentRow.is_active = row.is_active
        this.currentRow.user_type = row.user_type
        this.currentRow.showEdit = true
      },

      toSaveUpdateRow() {
        const bodyData = { ...this.currentRow }
        bodyData.vip_expire = datetimeToStr(
          this.currentRow.vip_expire,
          true,
          '-'
        )
        bodyData.probation_expire = datetimeToStr(
          this.currentRow.probation_expire,
          true,
          '-'
        )
        this.currentRow.saveLoading = true
        UpdateUser(bodyData)
          .then((res) => {
            this.$baseMessage(res.message, 'success')
            this.currentRow.showEdit = false
            this.currentRow.saveLoading = false
            this.currentRow.uid = -1
            this.currentRow.password = ''
            this.getUsers()
          })
          .catch(() => {
            this.currentRow.saveLoading = false
          })
      },
    },
  }
</script>
<style scoped lang="scss">
  .red-text {
    color: red;
  }
  .green-text {
    color: green;
  }
</style>
